import {
  AnalysisItem,
  virDirectionChartData,
  virProjectChartData,
} from "@/api/view/pages/analysis_api";
import { Button } from "@/components/ui/btn/button1";
import { Chart } from "@/components/ui/chart/chart";
import { Input } from "@/components/ui/input/input1";
import { useEffect, useState } from "react";
import { toast } from "sonner";

const Analysis = () => {
  const [batch, setBatch] = useState(() => {
    // 从localStorage获取上次保存的批次值，如果没有则返回空字符串
    return localStorage.getItem("analysisBatch") || "";
  });
  const [directionChartData, setDirectionChartData] = useState<AnalysisItem[]>(
    [],
  );
  const [projectChartData, setProjectChartData] = useState<AnalysisItem[]>([]);

  // 当batch值改变时，保存到localStorage
  useEffect(() => {
    localStorage.setItem("analysisBatch", batch);
  }, [batch]);

  const simulate = () => {
    // 重置错误状态
    setHasError(false);
    // 验证所有必填字段
    const errors = !batch;
    setHasError(errors);
    if (errors) {
      toast.error("请填写所有必填项", {
        position: "top-center",
        description: "请检查批次是否已填写",
      });
      return true;
    }

    return false;
  };

  const [hasError, setHasError] = useState(false);
  return (
    <div className="flex h-full flex-grow flex-col">
      <div className="mb-6 flex flex-row justify-between">
        <div className="space-x-4">
          <Button
            onClick={() => {
              if (simulate()) {
                return;
              }
              setDirectionChartData(virDirectionChartData);
              toast.success("模拟了分析！", { position: "top-center" });
            }}
          >
            开始笔记分析
          </Button>
          <Button
            onClick={() => {
              if (simulate()) {
                return;
              }
              setProjectChartData(virProjectChartData);
              toast.success("模拟了查询！", { position: "top-center" });
            }}
          >
            查询热点
          </Button>
        </div>
        <div>
          <Input
            className="w-48 gap-0"
            placeholder="输入批次"
            value={batch}
            errorFlag={hasError}
            onChange={(e) => {
              setBatch(e.target.value);
            }}
          ></Input>
        </div>
      </div>
      <div className="mb-6 flex justify-between">
        <div className="w-1/2 rounded-lg bg-white p-4 shadow">
          <h3 className="mb-4 text-lg font-medium">笔记方向统计</h3>
          {directionChartData.length > 0 && (
            <Chart options={directionChartData} />
          )}
        </div>
        <div className="w-1/2 rounded-lg bg-white p-4 shadow">
          <h3 className="mb-4 text-lg font-medium">笔记主推项目统计</h3>
          {projectChartData.length > 0 && (
            <Chart options={projectChartData} fill="#82ca9d" />
          )}
        </div>
      </div>
      <div className="relative flex h-full flex-grow">
        <iframe
          src={import.meta.env.VITE_ANALYSIS_URL}
          className="absolute inset-0 h-full w-full border-0"
        ></iframe>
      </div>
    </div>
  );
};

export default Analysis;
